<template>
  <div class="login-parent">
    <div class="login-box">
      <!--注册界面-->

      <div class="container a-container" id="a-container">
        <div class="form" id="a-form">
          <h2 class="form_title title">管理中心 | 注册</h2>
          <!--          <div class="form__icons"></div>-->
          <span class="form__span">注册一个账号，用于登录管理中心</span>
          <div class="login-form-input-box">
            <div class="input-item">
              <div class="input">
                <el-input v-model="userInput.userName" clearable @blur="checkName"
                          @input="userNameMsgShow=false" type="text"
                          placeholder="账户名"/>
              </div>
              <div :class="userNameMsgState+'-msg'">
                <span v-show="userNameMsgShow">
                  {{ userNameMsg }}
                </span>
              </div>
            </div>
            <div class="input-item email-box">
              <div class="input">
                <el-input v-model="userInput.email" clearable
                          @blur="checkEmail" @input="emailMsgShow=false;emailBtnShow = false;"
                          type="text" placeholder="邮箱"/>
              </div>
              <div class="email-msg-box">
                <div :class="emailMsgState+'-msg'">
                  <span v-show="emailMsgShow">
                  {{ emailMsg }}
                </span>
                </div>
                <div class="email-button" v-show="emailBtnShow">
                  <el-button type="primary" @click="sendEmailCode" :loading="sendEmailLoading">
                    {{ emailTime }} 发送验证码
                  </el-button>
                </div>
              </div>
            </div>
            <div class="input-item">
              <div class="input">
                <el-input v-model="userInput.emailCode" type="text" placeholder="邮箱验证码" clearable/>
              </div>
              <!--              <div class="error-msg">-->
              <!--                -->
              <!--              </div>-->
            </div>
            <div class="input-item" style="justify-content: space-between;">
              <div class="input">
                <el-input v-model="userInput.password" show-password clearable
                          @input="checkPassword"
                          type="password"
                          placeholder="密码"/>
              </div>
              <div>
                <password-power :power="registerPsdPower"/>
              </div>
            </div>
            <div class="input-item">
              <div class="input">
                <el-input v-model="userInput.rePassword" show-password clearable autocomplete="off"
                          @input="checkRePassword"
                          type="password" placeholder="确认密码"/>
              </div>
              <div class="error-msg">
                <span v-show="rePasswordShow">
                  {{ rePasswordMsg }}
                </span>
              </div>
            </div>
          </div>
          <button class="form__button button register-btn" @click="register" v-loading="registerBtnLoading">注 册
          </button>
        </div>
      </div>
      <!--登录界面-->
      <div class="container b-container" id="b-container">
        <div class="form" id="a-form">
          <h2 class="form_title title">管理中心 | 登录</h2>
          <div class="form__icons"></div>
          <span class="form__span">使用用户名或者邮箱登陆</span>
          <div class="input-item">
            <div class="input">
              <el-input v-model="userInput.userName" type="text" clearable placeholder="邮箱/用户名"/>
            </div>
          </div>
          <div class="input-item">
            <div class="input">
              <el-input v-model="userInput.password" type="password" show-password clearable placeholder="密码"/>
            </div>
          </div>
          <div class="input-item">
            <div class="forget" @click="forgetPsdShow++">忘记密码？</div>
          </div>
          <button class="form__button button login-btn" @click="login" v-loading="loginBtnLoading">登 录</button>
        </div>
      </div>
      <!--切换按钮-->
      <div class="switch" id="switch-cnt">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle--t"></div>
        <div class="switch__container" id="switch-c1">
          <h2 class="switch__title title">账号注册</h2>
          <p class="switch__description description">已有账号，我要登录</p>
          <button class="switch__button button switch-btn" @click="changeForm">登 录</button>
        </div>
        <div class="switch__container is-hidden" id="switch-c2">
          <h2 class="switch__title title">登录系统</h2>
          <p class="switch__description description">没有账号，我要注册</p>
          <button class="switch__button button switch-btn" @click="changeForm">注 册</button>
        </div>
      </div>

      <div class="dialog-box" id="dialog-box">
        <captcha-code-dialog :show="captchaCodeShow" @captchaCodeCheckState="getCheckState"/>
        <updatePassword :show="forgetPsdShow"/>
      </div>
    </div>
  </div>
</template>
<script>
import {
  checkEmailIsExist,
  checkUserNameIsExist,
  isCaptchaCode,
  sendEmailCode,
  userLogin, userRegister
} from "@/api/httpApi/userApi.js";
import {errorCode, successCode} from "@/api/httpApi/base/http.js";
import * as myMessage from "@/api/myMessage.js";
import {isEmail} from "@/api/utils.js";
import {hex_md5} from "@/api/md5.js";
import UpdatePassword from "@/components/user/updatePassword.vue";
import captchaCodeDialog from "@/components/user/captchaCodeDialog.vue";
import PasswordPower from "@/components/user/passwordPower.vue";
import {constantStore} from "@/stores/constantStore.js";

export default {
  components: {PasswordPower, UpdatePassword, captchaCodeDialog},
  data() {
    return {
      user: {
        name: "",
        password: "",
        email: "",
        phoneOrEmailCode: "",
        from: "P_"
      },
      userInput: {
        userName: "",
        password: "",
        rePassword: "",
        email: "",
        emailCode: ""
      },
      registerPsdPower: -1,
      sendEmailCodeType: "register",
      forgetPsdShow: 0,
      sendEmailLoading: false,
      emailCodeShow: false,
      emailBtnShow: false,
      emailTime: "",
      userNameMsgShow: false,
      userNameMsgState: "success",//error warring
      userNameMsg: "",
      emailMsgShow: false,
      emailMsgState: "success",//error warring
      emailMsg: "",
      passwordMsgShow: false,
      passwordMsgState: false,
      passwordMsg: "success",//error warring
      rePasswordShow: false,
      rePasswordMsg: "",
      switchCtn: "",
      switchC1: "",
      switchC2: "",
      switchCircle: "",
      aContainer: "",
      bContainer: "",
      loginBtnLoading: false,
      registerBtnLoading: false,
      captchaCodeShow: 0,
      captchaCodeState: false
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async login() {
      if (this.loginBtnLoading) {
        return;
      }
      if (this.userInput.userName.trim() === "") {
        myMessage.warning("用户名/邮箱不能为空");
        this.loginBtnLoading = false;
        return;
      }
      if (this.userInput.password.trim() === "") {
        myMessage.warning("密码不能为空");
        this.loginBtnLoading = false;
        return;
      }
      this.loginBtnLoading = true
      await this.checkCaptchaCode();
      if (!this.captchaCodeState) {
        this.loginBtnLoading = false;
        return;
      }
      this.user.name = this.userInput.userName;
      this.user.password = hex_md5(this.userInput.password);
      await userLogin(this.user).then(res => {
        if (res.code === successCode) {
          myMessage.success(res.message);
          this.$router.push("/index");
          this.clearUser();
        } else {
          myMessage.error(res.message);
        }
        this.loginBtnLoading = false;
      })
    },
    async register() {
      if (this.registerBtnLoading) {
        return;
      }
      if (this.userInput.userName === '') {
        myMessage.error("账号不能为空");
        return;
      }
      if (this.userInput.email === '') {
        myMessage.error("邮箱不能为空");
        return;
      }
      if (this.userInput.emailCode === '') {
        myMessage.error("邮箱验证码不能为空");
        return;
      }
      if (this.userInput.password === '') {
        myMessage.error("密码不能为空");
        return;
      }
      if (this.rePasswordShow) {
        myMessage.error(this.rePasswordMsg);
        return;
      }
      if (this.emailMsgShow) {
        let msg = "";
        if (this.emailMsgState === "warring") {
          msg = "邮箱格式不正确"
          myMessage.warning(msg + "，无法注册")
          return;
        }
        if (this.emailMsgState === "error") {
          msg = "邮箱已被占用"
          myMessage.warning(msg + "，无法注册")
          return;
        }
      }
      if (this.rePasswordShow) {
        myMessage.error(this.rePasswordMsg);
        return;
      }
      if (this.userNameMsgState === "error") {
        myMessage.warning("用户名重复，无法注册")
        return;
      }
      await this.checkCaptchaCode();
      if (!this.captchaCodeState) {
        return;
      }
      this.registerBtnLoading = true
      this.user.name = this.userInput.userName;
      this.user.password = hex_md5(this.userInput.password);
      this.user.email = this.userInput.email;
      this.user.phoneOrEmailCode = this.userInput.emailCode;
      userRegister(this.user).then(res => {
        if (res.code === successCode) {
          let password = this.userInput.password;
          let userName = this.userInput.userName;
          this.changeForm();
          this.userInput.userName = userName;
          this.userInput.password = password;
          myMessage.success("注册成功，请登录~");
        } else {
          myMessage.error(res.message);
        }
        this.registerBtnLoading = false
      })
    },
    getCheckState(val) {
      this.captchaCodeState = val;
    },
    async checkCaptchaCode() {
      await isCaptchaCode().then(res => {
        if (res.code === successCode) {
          this.captchaCodeState = true;
        } else {
          this.captchaCodeState = false;
          this.captchaCodeShow++;
        }
      })
    },
    checkPassword() {
      this.registerPsdPower = constantStore().checkPasswordStrength(this.userInput.password);
    },
    checkRePassword() {
      this.rePasswordShow = false;
      if (this.userInput.password === '' || this.userInput.rePassword === '') {
        return;
      }
      if (this.userInput.password === this.userInput.rePassword) {
        this.rePasswordShow = false;
      } else {
        this.rePasswordMsg = "两次输入密码不一样，请检查后重试~";
        this.rePasswordShow = true;
      }

    },
    async sendEmailCode() {
      await this.checkCaptchaCode();
      if (this.captchaCodeShow || this.captchaCodeShow === '') {
        return;
      }
      this.sendEmailLoading = true;
      this.emailMsgShow = false;
      this.emailTime = 30
      let intervalId = setInterval(() => {
        this.emailTime -= 1;
        if (this.emailTime < 0) {
          this.emailTime = "";
          this.sendEmailLoading = false;
          clearTimeout(intervalId);
        }
      }, 1000);// 设置一个每隔 1000 毫秒执行一次的计时器
      sendEmailCode(this.sendEmailCodeType, this.userInput.email).then(res => {
        if (res.code === successCode) {
          myMessage.success(res.message);
        } else {
          myMessage.error(res.message);
        }
      })
    },
    checkEmail() {
      if (this.userInput.email === "") {
        return
      }
      if (!isEmail(this.userInput.email)) {
        this.emailMsg = "邮箱格式不正确";
        this.emailMsgState = "warring";
        this.emailMsgShow = true;
        return;
      }
      checkEmailIsExist(this.userInput.email).then(res => {
        if (res.code === successCode) {
          this.emailMsg = "请点击右侧按钮获取验证码";
          this.emailMsgState = "success";
          this.emailBtnShow = true;
        } else {
          this.emailMsg = "邮箱已被占用";
          this.emailMsgState = "error";
          this.emailBtnShow = false;
        }
        this.emailMsgShow = true;
      })
      this.sendEmailCodeType = "register"
    },
    checkName() {
      if (this.userInput.userName === "") {
        return
      }
      checkUserNameIsExist(this.userInput.userName).then(res => {
        if (res.code === successCode) {
          this.userNameMsg = "您的用户名独一无二";
          this.userNameMsgState = "success";
        } else {
          this.userNameMsg = "用户名已被占用";
          this.userNameMsgState = "error";
        }
        this.userNameMsgShow = true;
      })
    },
    clearUser() {
      this.userInput.userName = "";
      this.userInput.password = "";
      this.userInput.email = "";
      this.userInput.emailCode = "";
      this.userInput.rePassword = "";
      this.user.name = "";
      this.user.password = "";
      this.user.email = "";
      this.user.phoneOrEmailCode = "";

    },
    changeForm(e) {
      this.clearUser();
      this.switchCtn.classList.add("is-gx");
      setTimeout(function () {
        this.switchCtn.classList.remove("is-gx");
      }, 1500)

      this.switchCtn.classList.toggle("is-txr");
      this.switchCircle[0].classList.toggle("is-txr");
      this.switchCircle[1].classList.toggle("is-txr");

      this.switchC1.classList.toggle("is-hidden");
      this.switchC2.classList.toggle("is-hidden");
      this.aContainer.classList.toggle("is-txl");
      this.bContainer.classList.toggle("is-txl");
      this.bContainer.classList.toggle("is-z200");
    },
    init() {
      this.switchCtn = document.querySelector("#switch-cnt");
      this.switchC1 = document.querySelector("#switch-c1");
      this.switchC2 = document.querySelector("#switch-c2");
      this.switchCircle = document.querySelectorAll(".switch__circle");
      this.aContainer = document.querySelector("#a-container");
      this.bContainer = document.querySelector("#b-container");
      this.changeForm();
    }
  }
}
</script>

<style scoped lang="scss">
$buttonRadius: 2.5rem;


.input-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  //height: 7rem;

  .email-msg-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2rem;
    margin: 1rem 0;
  }

  & :deep(.el-input__wrapper) {
    width: 35rem;
    height: 4rem;
    margin: 4px 0;
    padding-left: 2.5rem;
    font-size: 1.3rem;
    letter-spacing: 0.15px;
    border: none;
    outline: none;
    font-family: "Montserrat", sans-serif;
    background-color: #ecf0f3;
    transition: 0.25s ease;
    border-radius: 8px;
    box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
  }

  & :deep(.is-focus) {
    box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
  }

  & .forget {
    cursor: pointer;
  }

  & .forget:hover {
    color: #0fd7ff;
  }

}

.success-msg,
.warring-msg,
.error-msg {
  padding: 0 .8rem;
  height: 2rem;
}

.error-msg {
  color: #d23d69;
}

.success-msg {
  color: #47d15d;
}

.warring-msg {
  color: rgb(230, 162, 60);
}

.login-parent {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: rgb(236, 240, 243);
  user-select: none;

  :deep(.el-loading-mask) {
    border-radius: $buttonRadius;
    width: 18.1rem;
    height: 5.1rem;
  }

  :deep(.el-loading-mask):hover,
  :deep(.el-loading-mask):active,
  :deep(.el-loading-mask):focus {
    box-shadow: none;
    transform: scale(1);
    transition: 1s;
  }
}

/**/
.login-box {
  position: relative;
  width: 110rem;
  min-width: 110rem;
  min-height: 70rem;
  height: 70rem;
  padding: 2.5rem;
  background-color: #ecf0f3;
  box-shadow: 1rem 1rem 1rem #d1d9e6, -1rem -1rem 1rem #f9f9f9;
  border-radius: 1.2rem;
  overflow: hidden;
}

.form__input {
  width: 35rem;
  height: 4rem;
  margin: 4px 0;
  padding-left: 2.5rem;
  font-size: 1.3rem;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  font-family: "Montserrat", sans-serif;
  background-color: #ecf0f3;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}

.form__input:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}

@media (max-width: 1200px) {
  .login-box {
    transform: scale(0.7);
  }
}

@media (max-width: 1000px) {
  .login-box {
    transform: scale(0.6);
  }
}

@media (max-width: 800px) {
  .login-box {
    transform: scale(0.5);
  }
}

@media (max-width: 600px) {
  .login-box {
    transform: scale(0.4);
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 60rem;
  height: 100%;
  padding: 2.5rem;
  background-color: #ecf0f3;
  transition: 1.25s;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.form__icon {
  object-fit: contain;
  width: 3rem;
  margin: 0 5px;
  opacity: 0.5;
  transition: 0.15s;
}

.form__icon:hover {
  opacity: 1;
  transition: 0.15s;
  cursor: pointer;
}


.form__span {
  margin-top: 3rem;
  margin-bottom: 1.2rem;
}

.form__link {
  color: #181818;
  font-size: 1.5rem;
  margin-top: 2.5rem;
  border-bottom: 1px solid #a0a5a8;
  line-height: 2;
}

.title {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 3;
  color: #181818;
}

.description {
  font-size: 1.4rem;
  letter-spacing: 0.25px;
  text-align: center;
  line-height: 1.6;
}

.button {
  width: 18rem;
  height: 5rem;
  border-radius: $buttonRadius;
  margin-top: 5rem;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.15px;
  background-color: #4b70e2;
  color: #f9f9f9;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  border: none;
  outline: none;
}

/**/
.a-container {
  z-index: 100;
  left: calc(100% - 600px);
}

.b-container {
  left: calc(100% - 600px);
  z-index: 0;
}

.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40rem;
  padding: 5rem;
  z-index: 200;
  transition: 1.25s;
  background-color: #ecf0f3;
  overflow: hidden;
  box-shadow: .4rem .4rem 1rem #d1d9e6, -0.4rem -0.4rem 1rem #f9f9f9;
}

.switch__circle {
  position: absolute;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background-color: #ecf0f3;
  box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
  bottom: -60%;
  left: -60%;
  transition: 1.25s;
}

.switch__circle--t {
  top: -30%;
  left: 60%;
  width: 30rem;
  height: 30rem;
}

.switch__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  width: 40rem;
  padding: 5rem 5.5rem;
  transition: 1.25s;
}

.button,
.switch__button {
  cursor: pointer;
}

.button:hover,
.switch__button:hover {
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
  transform: scale(0.985);
  transition: 0.25s;
}

.button:active,
.button:focus,
.switch__button:active,
.switch__button:focus {
  box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
  transform: scale(0.97);
  transition: 0.25s;
}

/**/
.is-txr {
  left: calc(100% - 400px);
  transition: 1.25s;
  transform-origin: left;
}

.is-txl {
  left: 0;
  transition: 1.25s;
  transform-origin: right;
}

.is-z200 {
  z-index: 200;
  transition: 1.25s;
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: 1.25s;
}

.is-gx {
  animation: is-gx 1.25s;
}

@keyframes is-gx {
  0%, 10%, 100% {
    width: 40rem;
  }
  30%, 50% {
    width: 50rem;
  }
}
</style>
